<template>
  <div class="form-container" >
    <el-tabs type="border-card">
      <div>
        <p class="content-tit">查询条件</p>
        <el-form :label-position="labelPosition" label-width="100px" :model="formData">
          <el-row type="flex" class="row-bg">
            <el-col :span="8">
              <el-form-item label="单证盘点起期" size="mini" :required="true">
                <el-date-picker v-model="formData.inventStartDate" type="date" placeholder="请输入盘点起期时间" :format="'yyyy-MM-dd'"
                                :value-format="'yyyy-MM-dd'">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单证盘点止期" size="mini":required="true">
                <el-date-picker v-model="formData.inventEndDate" type="date" placeholder="请输入盘点止期时间" :format="'yyyy-MM-dd'"
                                :value-format="'yyyy-MM-dd'">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" class="row-bg">
            <el-col :span="8">
              <el-form-item label="盘点机构" size="mini":required="true">
                <el-select v-model="formData.inventManageCom" filterable placeholder="请选择申请机构">
                  <el-option
                    v-for="item in comList"
                    :key="item.code"
                    :label="item.codeName"
                    :value="item.code">
                    <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div align="right">
          <el-button type="primary" @click="" icon="el-icon-search">查询</el-button>
        </div>
      </div>
      <div>
        <p class="content-tit">
          <span @click="isShow('isShowSingles')" v-if='isShowSingles'>-</span>
          <span @click="isShow('isShowSingles')" v-else>+</span>盘点列表</p>
        <el-table :data="inventList"  style="width: 100%" class='table-common' :highlight-current-row="true" border v-show="isShowSingles">
          <el-table-column label="#" checked="selectionData"
                           type="selection"
                           min-width="6%">
          </el-table-column>
          <el-table-column label="序号" type='index'  min-width="8%" align="center" ></el-table-column>
          <el-table-column label="盘点流水号"   min-width="10%" align="center" ></el-table-column>
          <el-table-column label="盘点机构"  min-width="8%" align="center" ></el-table-column>
          <el-table-column label="单证编码"  min-width="10%" align="center" ></el-table-column>
          <el-table-column label="单证名称"  min-width="10%" align="center" ></el-table-column>
          <el-table-column prop="certifyEdition" label="单证版本" min-width="9%" align="center"></el-table-column>
          <el-table-column label="系统库存数量"  min-width="8%" align="center" ></el-table-column>
          <el-table-column label="实物数量"  min-width="8%" align="center" ></el-table-column>
          <el-table-column label="情况说明"  min-width="14%" align="center" ></el-table-column>
          <el-table-column label="盘点日期"  min-width="8%" align="center" ></el-table-column>
          <el-table-column label="盘点人"  min-width="8%" align="center" ></el-table-column>
          <el-table-column label="操作" min-width="10%" align="center">
            <!--<template slot-scope="scope">-->
              <!--<el-button type="primary"-->
                         <!--icon="el-icon-view"-->
                         <!--@click="dialogTableVisible = true"-->
                         <!--size="mini">详情-->
              <!--</el-button>-->
              <!--<el-dialog title="盘点明细信息" :visible.sync="dialogTableVisible" width="80%">-->
                <!--<el-table :data="inventCertifyList"  style="width: 100%" class='table-common' :highlight-current-row="true" border>-->
                  <!--<el-table-column label="#" checked="selectionData"-->
                                   <!--type="selection"-->
                                   <!--min-width="6%">-->
                  <!--</el-table-column>-->
                  <!--<el-table-column label="序号" type='index' min-width="8%" align="center" ></el-table-column>-->
                  <!--<el-table-column prop="certifyCode" label="单证编码" min-width="10%" align="center"></el-table-column>-->
                  <!--<el-table-column prop="certifyName" label="单证名称" min-width="10%" align="center"></el-table-column>-->
                  <!--<el-table-column prop="certifyOperType" label="起始号码" min-width="12%" align="center"></el-table-column>-->
                  <!--<el-table-column prop="certifyOperType" label="终止号码" min-width="12%" align="center"></el-table-column>-->
                  <!--<el-table-column prop="certifyType" label="数量" min-width="10%" align="center"></el-table-column>-->
                <!--</el-table>-->
                <!--<div class="mar15 " align="right" v-show="isShowSingles">-->
                  <!--<el-pagination-->
                    <!--@current-change="handleCurrentChangeSingle"-->
                    <!--:current-page="selfPage.currentPage"-->
                    <!--:page-size="selfPage.perPage"-->
                    <!--layout="total, prev, pager, next, jumper"-->
                    <!--:total="selfPage.totalSize">-->
                  <!--</el-pagination>-->
                <!--</div>-->
              <!--</el-dialog>-->
            <!--</template>-->
          </el-table-column>
        </el-table>
        <div class="mar15 " align="right" v-show="isShowSingles">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="publicPage.currentPage"
            :page-size="publicPage.perPage"
            layout="total, prev, pager, next, jumper"
            :total="publicPage.totalSize">
          </el-pagination>
        </div>
      </div>
    </el-tabs>
  </div>

</template>

<script>
    export default {
        name: "card-invent-search",
        data(){
          return {
            labelPosition: 'right',
            isShowSingles: true,
            formData: {
              inventStartDate: '',
              inventEndDate: '',
              inventManageCom: ''
            },
            comList: [],
            inventList: [],
            inventCertifyList: [],
            publicPage: {
              currentPage: 1,
              hasMore: true,
              perPage: 10,
              totalPage: 0,
              totalSize: 0
            },
            selfPage: {
              currentPage: 1,
              hasMore: true,
              perPage: 10,
              totalPage: 0,
              totalSize: 0
            },
          }
        },
      methods: {
        isShow(val) {
          this[val] = !this[val]
        },
        handleSelectionChange(val) {
          this.selectionData = val;
        },
        handleCurrentChange(num) {
          this.selfFormData.pageNum = num
        },
        handleCurrentChangeSingle(num) {
          this.selfFormData.pageNum = num
        },
        query(){},
      }
    }
</script>

<style scoped>

</style>
